// 右下角折线图
<template>
    <div class="line-chart" ref="line">   
    </div>
</template>

<script>
import echartMixins from '../../utils/resizeMixins'

export default {
    data(){
        return{
            chart:null
        }
    },
    mixins:[echartMixins],
    mounted(){
        this.draw()
    },
    methods:{
        draw(){
            this.chart = this.$echarts.init(this.$refs.line)
            let option = {
                title:{
                    text:'实时功率',
                    subtext:'(按小时记)',
                    textStyle:{
                        fontSize: 15,
                        color: "white"
                    },
                    subtextStyle:{
                        fontSize: 10,
                        color: "white"
                    }
                },
                tooltip:{
                    trigger:'axis'
                },
                legend:{
                    data:['最大功率值', '最小功率值'],
                    textStyle:{
                        color:"#fff"
                    }
                },
                // toolbox:{
                //     show: true,
                //     feature: {
                //         dataZoom: {
                //             yAxisIndex: 'none'
                //         },
                //         dataView: {readOnly: false},
                //         magicType: {type: ['line', 'bar']},
                //         restore: {},
                //         saveAsImage: {}
                //     }
                // },
                xAxis:{
                    type:'category',
                    boundaryGap: false,
                    data:['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00'],
                    axisLine: {
                        lineStyle: {
                            color: "#fff",
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#fff",
                        }
                    }
                },
                series:[
                    {
                        name:'最大功率值',
                        type:'line',
                        data:[60,50,70,80,100,120,100,90],
                        markPoint:{
                            data:[
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine:{
                            data:[
                                {type: 'average', name: '平均值'}
                            ]
                        },
                    },
                    {
                        name: '最低功率值',
                        type: 'line',
                        data: [20,15,30,40,60,65,50,30],
                        markPoint:{
                            data:[
                                {name: '日最低功率', value: 15, xAxis: 1, yAxis: 2}
                            ]
                        },
                        markLine:{
                            data:[
                                {type: 'average', name: '平均值'},
                                [{
                                    symbal: 'none',
                                    x: '90%',
                                    yAxis: 'max'
                                },
                                {
                                    symbol: 'circle',
                                    label: {
                                        position: 'start',
                                        formatter: '最大值'
                                    },
                                    type: 'max',
                                    name: '最高点'
                                }]
                            ]
                        }
                    }
                ]
            }
            this.chart.setOption(option)
        }
        
    }
}
</script>

<style lang="scss" scoped>
.line-chart{
    width: 100%;
    height: 100%;
}
</style>